<template>
  <div class="dashboard-container">
    <el-table :data="tableData" class="no-scroll-table">
      <el-table-column fixed type="index" label="序号" width="120" />
      <el-table-column prop="infoName" label="人员姓名" />
      <el-table-column prop="registName" label="录入人" />
      <el-table-column label="打卡照片">
        <template #default="scope">
          <el-image
            :src="baseImgUrl + scope.row.infoImgUrl"
            :preview-src-list="[baseImgUrl + scope.row.infoImgUrl]"
            fit="cover"
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrap">
      <el-pagination
        v-model:current-page="currentPage"
        :page-size="currentPageSize"
        background
        layout="total, prev, pager, next"
        :total="totalCount"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" name="Village" setup>
import { infoList } from '@/api/info'
import type { Info } from '@/api/info.model'
import useErrorMessage from '@/hooks/useErrorMessage'

const tableData = ref<Info[]>([])
const currentPage = ref<number>(1)
const currentPageSize = ref<number>(10)
const totalCount = ref<number>(0)

const baseImgUrl = import.meta.env.VITE_APP_IMG_URL

onMounted(() => {
  getUserList()
})

const getUserList = async () => {
  try {
    const { data } = await infoList({ pageNum: currentPage.value, pageSize: currentPageSize.value })
    tableData.value = data.data
    totalCount.value = data.count
  } catch (error) {
    useErrorMessage(error)
  }
}

const handleCurrentChange = () => {
  getUserList()
}
</script>

<style scoped lang="scss">
@import '@/styles/variables.scss';

.dashboard-container {
  padding: 15px;
  color: $color-primary;

  .pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  .el-image {
    width: 50px;
  }
}
</style>
